import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const textDocs= { source: { code: `text := component.NewText("sampleText")`}}

export const textView = {
  metadata: {
    type: 'text',
  },
  config: {
    value: 'hello world',
    isMarkdown: false,
  },
};

export const TextStoryTemplate = args => ({
  template: `<app-view-text [view]= "view"></app-view-text>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Text component</h1>
<h2>Description</h2>

<p>The Text component is used to present simple text</p>
<h2>Example</h2>

<Meta title="Components/Text" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Text component"
         parameters={{ docs: textDocs }}
         args= {{ view: textView }}>
    { TextStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Text component" />
